<template>
  <div class="box">
    <div class="top">
      <span @click="fun()" style="font-size:.14rem">💜返回</span>
      <p>多图详情</p>
      <h1>···</h1>
    </div>
    <h1 style="height: 0.4rem">{{ this.$route.params.id }}</h1>
    <img src="images/d_02.jpg" class="content" />
    <div v-if="this.$store.state.hotm.arr.hot" class="aside">
      <!-- <p>{{ this.$store.state.hotm.arr.hot[this.$route.params.id-1].text }}</p> -->
      <p>你喜欢看书吗 叔也喜欢看你</p>
     <div >
       <img src="images/d_05.jpg">
       <button>+关注</button>
     </div>
    </div>
    <div style="background-color:#fff">
      <div class="sort">
     <img src="images/d_09.jpg" alt="">
     <div>
       <h1>收藏在专辑  日出记录册</h1>
       <p>36张图片 | 49人收藏</p>
     </div>
    </div>
    </div>
    <div class="tag">
         <span>吴世勋</span>
         <span>吴世勋头像</span>
         <span>傅衍</span>
         <span>呃男爱豆我尽力了东拼西凑的</span>
    </div>
    <div class="laguage">
      <div>
        <h1>所有评论</h1>
        <img src="images/1.jpg">
        <div>
          <img src="images/8_15.jpg" alt="">
          <img src="images/8_24.jpg" alt="">
          <p>超帅</p>
        </div>
        <div>
          <img src="images/8_15.jpg" alt="">
          <img src="images/8_24.jpg" alt="">
          <p>超帅</p>
        </div>
        <div>
          <img src="images/8_15.jpg" alt="">
          <img src="images/8_24.jpg" alt="">
          <p>超帅</p>
        </div>
        <div>
          <img src="images/8_15.jpg" alt="">
          <img src="images/8_24.jpg" alt="">
          <p>超帅</p>
        </div>
        <div>
          <img src="images/8_15.jpg" alt="">
          <img src="images/8_24.jpg" alt="">
          <p>超帅</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [this.$store.state.hotm.arr],
    };
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
  mounted() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxios");
  },
  // 12.读取state的数据
  computed: {
    newarr() {
      return this.$store.state.hotm.arr;
    },
  },
  watch:{
    arr(newvalue,oldvlue){
      console.log(newvalue);
      console.log(oldvlue)
    }
  }
};
</script>

<style scoped>
.box{
  background-color: #f5f5f5;
}
.top {
  display: flex;
  height: 0.4rem;
  width: 100%;
  background-color: white;
  line-height: 0.4rem;
  position: relative;
  border-bottom: 0.005rem solid gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.top > span {
  color: gray;
  font-size: 0.25rem;
  margin-right: 0.25rem;
}
.top > p {
  font-size: 0.2rem;
}
.top > h1 {
  position: absolute;
  right: 0.3rem;
}
.content {
  width: 100%;
  height: 3.5rem;
}
.aside{
  background-color: #fff;
  border: .005rem solid transparent;
}
.aside>p{
  font-size: .18rem;
  margin: .2rem 0;
   margin-left: .3rem;
   font-weight: 600;
}
.aside>div{
  display: flex;
  position: relative;
}
.aside>div>img{
  width: 2.5rem;
  margin-left: .2rem;
  
}
.aside>div>button{
  width: .6rem;
  height: .3rem;
  line-height: .3rem;
  position: absolute;
  right: .2rem;
  top: .25rem;
  border: none;
  background-color: #ff595b;
  color: #fff;
  border-radius: .15rem;
}
.sort{
  display: flex;
  margin-left: .3rem;
  padding-top: .1rem;
  background-color: #fff;
  padding-bottom: .1rem;
}
.sort>img{
  width: .945rem;

}
.sort>div{
  width: 2.2rem;
  background-color: #fafafa;
}
.sort>div>h1{
  font-size: .17rem;
  font-weight: 600;
  margin-top: .2rem;
  margin-left: .2rem;
  color: gray;
}
.sort>div>p{
  font-size: .1rem;
  font-weight: 600;
  margin-top: .2rem;
  margin-left: .2rem;
  color: gray;
}
.tag{
  background-color: #fff;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: .3rem;
}
.tag>span{
  display: block;
  padding:  .15rem;
  font-size: .15rem;
  background-color: #ededed;
  border-radius: .15rem;
  margin-left: .2rem;
  margin-top: .1rem;
}
.laguage{
  background-color: #fff;
  margin-top: .2rem;
}
.laguage>div>h1{
  font-size: .25rem;
  margin-left: .2rem;
  padding: .2rem 0;
}
.laguage>div>img{
  display: block;
  width: 3rem;
  margin: 0 auto;
}
.laguage>div>div>img:nth-of-type(1){
  width: 1.5rem;
}
.laguage>div>div>img:nth-of-type(2){
  width: .6rem;
  height: .3rem;
  float: right;
  margin-right: .2rem;
}
.laguage>div>div>p{
  font-size: .2rem;
  margin-left: .3rem;
  color: gray;
}
</style>